<template>
  <div class="nav-bar">
      <img class="back" src="../assets/back_icon.png" alt="back" @click="back">
     {{title}} 
  </div>
</template>

<script>
export default {
    props:['title'],
    methods:{
        back() {
            this.$router.go(-1)
        }
    }
}

</script>
<style scoped lang="scss">
    .nav-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        position: sticky;
        height: 0.435rem;
        font-size: 0.18rem;
        font-weight: 500;
        color: #303030;
        .back {
            position: absolute;
            left: 0.14rem;
            height: 0.18rem;
            width: 0.1rem;
            top: 50%;
            margin-top: -0.09rem;
        }
        &::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: #e4e4e4;
            transform: scale(1, 0.5);
        }
    }
</style>